<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>

    <script>
        /*
            1、变量作用域: 变量在什么范围内是可用的
        */
        {
            var name = 'why';
            console.log(name);
        }
        //console.log(name); //var没有块级作用域,所以这里仍然是可以使用的

        /*
            ES5之前因为if和for都没有块级作用域的概念,所以很多时候都必须借助于function的作用域来解决应用外变量的问题
            没有块级作用域引起的问题: if的块级
        */
        var func;
        if(true){
            var name = '苏州大学';

            func = function(){
                console.log(name);
            }
        }
        
        name = '北京大学';
        //这里的本意是打印if作用域里面的name的值,但是由于var没有块级作用域,所以数值很容易的被改变
        func(); //调用函数

        /*
            没有块级作用域引起的问题: for的块级
                给五个按钮增加点击事件,如果使用var关键字,不管点击哪一个按钮,都会输出
                第5个按钮被点击,是因为在遍历完成后,i的值变为了5,将打印语句内部的i的
                值也跟着一起改变了
        */
        // var btns = document.getElementsByTagName("button");
        // for(var i = 0; i < btns.length; i++){
        //     btns[i].addEventListener('click',function(){
        //         console.log('第' + i + '个按钮被点击');
        //     })
        // }

        //ES6中加入了let,let是有if和for的块级作用域的
        const btns = document.getElementsByTagName("button");
        for(let i = 0; i < btns.length; i++){
            btns[i].addEventListener('click',function(){
                console.log('第' + i + '个按钮被点击');
            })
        }
    </script>
    
</body>
</html>